<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ul li {
  list-style-type: none;
  line-height: 30px;
}
ul li label {
  width: 100px;
  display: inline-block;
}

</style>
<template>
  <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
    <ul>
      <li>
        <label for="">设备编码：</label><span>{{editOneData.deviceCode}}</span> </li>
      <hr>
      <li>
        <label for="">名称：</label><span>{{showText(editOneData.deviceTypeId,'name')}}</span> </li>
      <li>
        <label for="">型号：</label><span>{{showText(editOneData.deviceTypeId,'model')}}</span> </li>
      <li>
        <label for="">品牌：</label><span>{{showText(editOneData.deviceTypeId,'brand')}}</span> </li>
      <li>
        <label for="">协议：</label><span>{{showText(editOneData.deviceTypeId,'protocol')}}</span> </li>
      <li>
        <label for="">读取间隔：</label><span>{{showText(editOneData.deviceTypeId,'frequency')}}</span> </li>
      <hr>
      <li>
        <label for="">空间名称：</label><span>{{editOneData.spaceName}}</span> </li>
      <hr>
      <ul style="display:flex;" v-for="(item,index) in editOneData.readProperties" :key="'readProperties'+index">
        <li style="flex:1;">
          <label for="">属性：</label><span>{{item.name}}</span> </li>
        <li style="flex:1;">
          <label for="">端口：</label><span>{{item.port}}</span> </li>
        <li style="flex:1;">
          <label for="">单位：</label><span>{{item.unitName}}</span> </li>
      </ul>
    </ul>
    <!-- <FormItem label="类型" prop="name">
      <Input v-model="formValidate.name" placeholder="类型"></Input>
    </FormItem>
    <FormItem label="型号" prop="model">
      <Input v-model="formValidate.model" placeholder="型号"></Input>
    </FormItem>
    <FormItem label="品牌" prop="brand">
      <Select v-model="formValidate.brand" placeholder="品牌">
        <Option value="宝马">宝马</Option>
        <Option value="比亚迪">比亚迪</Option>
        <Option value="阿特拉斯">阿特拉斯</Option>
        <Option value="通用">通用</Option>
        <Option value="德耐尔">德耐尔</Option>
      </Select>
    </FormItem>
    <FormItem label="协议" prop="protocol">
      <Input v-model="formValidate.protocol" placeholder="协议"></Input>
    </FormItem>
    <FormItem label="读取间隔" prop="frequency">
      <Input v-model="formValidate.frequency" placeholder="读取间隔"></Input>
    </FormItem>
    <FormItem>
      <Button type="primary" @click="handleSubmit('formValidate')">确定</Button>
      <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
    </FormItem> -->
  </Form>
</template>
<script>
export default {
  data: function () {
    return {
      editOneData: {},
      formValidate: {
        name: '',
        model: '',
        brand: '',
        frequency: '',
        protocol: ''
      },
      ruleValidate: {
        name: [{ required: true, message: '必填项！', trigger: 'blur' }],
        model: [{ required: true, message: '必填项！', trigger: 'blur' }],
        brand: [{ required: true, message: '必填项！', trigger: 'blur' }],
        frequency: [{ required: true, message: '必填项！', trigger: 'blur' }],
        protocol: [{ required: true, message: '必填项！', trigger: 'blur' }]
      }
    }
  },
  methods: {
    handleSubmit: function (name) {
      let self = this
      self.$refs[name].validate((valid) => {
        if (valid) {
          // this.$Message.success('Success!')
          if (self.editOneData) {
            self.upd()
          } else {
            self.save()
          }
        } else {
          self.$Message.error('Fail!')
        }
      })
    },
    handleReset: function (name) {
      this.$refs[name].resetFields()
    },
    // 重置form
    formReset: function () {
      this.$refs['formValidate'].resetFields()
    },
    // 更新formdata
    updateFormdata: function (data) {
      let self = this
      self.editOneData = JSON.parse(JSON.stringify(data))
      if (self.editOneData.id) {
        self.formReset()
        self.formValidate = self.editOneData
      } else {
        self.formReset()
      }
    },
    // 新增
    save: function () {
      let self = this
      let postData = self.editOneData
      window.myapi.dev_save(postData).then(function (res) {
        if (res.data.status === 200) {
          self.$Message.success('保存成功!')
          self.$emit('deviceInfoModalSuccess')
        } else {
          let msg = res.data.msg ? res.data.msg : '保存失败！'
          self.$Message.error(msg)
        }
      }).catch(function (e) {
        self.$Message.error('保存失败!')
      })
    },
    // 修改
    upd: function () {
      let self = this
      let postData = self.editOneData
      window.myapi.dev_upd(postData).then(function (res) {
        if (res.data.status === 200) {
          self.$Message.success('保存成功!')
          self.$emit('deviceInfoModalSuccess')
        } else {
          let msg = res.data.msg ? res.data.msg : '保存失败！'
          self.$Message.error(msg)
        }
      }).catch(function (e) {
        self.$Message.error('保存失败!')
      })
    },
    // 展示属性
    showText: function (obj, key) {
      if (obj) {
        return obj[key]
      }
    }
  }
}

</script>
